<app-error-list [list]="errors"></app-error-list>
<div *ngIf="wood !== null" class="card mt-5 mb-5 bg-dark bg-opacity-75">
    <div class="card-header bg-opacity-100 bg-dark">
        <h5 class="card-title mt-1">Your Campfire</h5>
    </div>
    <div class="card-body">
        <p class="card-text">
            <span class="badge bg-success">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                Registered Campfire
            </span> &nbsp; <small>reg.no {{fire_id}}</small>
        </p>
        <div class="mb-3 text-center">
            <button class="btn" [class.btn-lg]="wood < 100" [class.btn-secondary]="wood >= 100" [class.btn-primary]="wood < 100" (click)="addWood()">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 611.999 611.999" width="24" height="24" fill="currentColor">
                    <g>
                        <path d="M216.02,611.195c5.978,3.178,12.284-3.704,8.624-9.4c-19.866-30.919-38.678-82.947-8.706-149.952
                    c49.982-111.737,80.396-169.609,80.396-169.609s16.177,67.536,60.029,127.585c42.205,57.793,65.306,130.478,28.064,191.029
                    c-3.495,5.683,2.668,12.388,8.607,9.349c46.1-23.582,97.806-70.885,103.64-165.017c2.151-28.764-1.075-69.034-17.206-119.851
                    c-20.741-64.406-46.239-94.459-60.992-107.365c-4.413-3.861-11.276-0.439-10.914,5.413c4.299,69.494-21.845,87.129-36.726,47.386
                    c-5.943-15.874-9.409-43.33-9.409-76.766c0-55.665-16.15-112.967-51.755-159.531c-9.259-12.109-20.093-23.424-32.523-33.073
                    c-4.5-3.494-11.023,0.018-10.611,5.7c2.734,37.736,0.257,145.885-94.624,275.089c-86.029,119.851-52.693,211.896-40.864,236.826
                    C153.666,566.767,185.212,594.814,216.02,611.195z"/>
                    </g>
                </svg>
                {{wood > 0 ? 'Add wood!' : 'Enlighten!'}}
            </button>
        </div>
        <button class="btn btn-danger btn-lg w-100" (click)="firealarm()" *ngIf="wood >= 100">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bell-fill" viewBox="0 0 16 16">
                <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
            </svg>
            TRIGGER FIREALARM
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bell-fill" viewBox="0 0 16 16">
                <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
            </svg>
        </button>
    </div>

    <div class="card-body" *ngIf="firefighters !== null">
        <p class="card-text" *ngIf="firefighters.length == 0">Firealarm has been sent. No firefighers are on duty. Bad luck.</p>
        <p class="card-text" *ngIf="firefighters.length > 0">Firealarm has been sent. The following firefighers are approaching your location now:</p>
        <ol>
            <li *ngFor="let ff of firefighters">{{ff.name}} <span class="text-muted">(from {{ff.location}})</span></li>
        </ol>
    </div>
</div>

<div *ngIf="wood !== null && wood > 0" class="mb-5 campfire-container" [style.height.px]="min(500, wood * 5)">
    <img src="assets/campfire.png" [height]="wood * 5" class="campfire">
</div>

<div class="spinner-border" role="status" *ngIf="wood === null">
    <span class="visually-hidden">Loading...</span>
</div>
